<template>
    <div class="block_main blue-tit">
        <!-- <div class="nytit">首页&gt;通知/督办</div> -->
        <el-row style="padding-top: 10px">
            <el-col :span="24" style="padding:0 5px">
                <el-card>
                    <div class="title">红包管理</div>
                    <div style="padding: 0px 20px;">
                        <!-- 筛选 -->
                        <span>签到活动</span>
                        <el-divider></el-divider>
                        <el-form style="padding:0px 20px" :model="region" size="small">
                            <!-- <el-form-item label="日期">
                            <el-date-picker
                                v-model="region.value1"
                                type="daterange"
                                range-separator="至"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期"
                            ></el-date-picker>
                            </el-form-item>-->
                            <el-form-item label="随机金额">
                                <el-input v-model="region.name" style="width:80px;"></el-input>&nbsp;—&nbsp;
                                <el-input v-model="region.name" style="width:80px;"></el-input>&nbsp;元
                                <el-button @click="Filter" type="primary">保存</el-button>
                            </el-form-item>
                            <el-form-item label="当前活动">
                                <el-input v-model="region.name" style="width:80px;" disabled></el-input>&nbsp;—&nbsp;
                                <el-input v-model="region.name" style="width:80px;" disabled></el-input>&nbsp;元
                                <el-button @click="Filter" type="primary">启动</el-button>
                                <el-button @click="Filter" type="danger">停止</el-button>
                            </el-form-item>
                        </el-form>
                        <span>转发活动</span>
                        <el-divider></el-divider>
                        <el-form style="padding:0px 20px" :model="region" size="small">
                            <!-- <el-form-item label="日期">
                            <el-date-picker
                                v-model="region.value1"
                                type="daterange"
                                range-separator="至"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期"
                            ></el-date-picker>
                            </el-form-item>-->
                            <el-form-item label="随机金额">
                                <el-input v-model="region.name" style="width:80px;"></el-input>&nbsp;—&nbsp;
                                <el-input v-model="region.name" style="width:80px;"></el-input>&nbsp;元
                                <el-button @click="Filter" type="primary">保存</el-button>
                            </el-form-item>
                            <el-form-item label="当前活动">
                                <el-input v-model="region.name" style="width:80px;" disabled></el-input>&nbsp;—&nbsp;
                                <el-input v-model="region.name" style="width:80px;" disabled></el-input>&nbsp;元
                                <el-button @click="Filter" type="primary">启动</el-button>
                                <el-button @click="Filter" type="danger">停止</el-button>
                            </el-form-item>
                        </el-form>
                    </div>
                </el-card>
            </el-col>
        </el-row>

        <!-- 督办弹窗 -->
        <el-dialog title="督办" :visible.sync="dialogVisibleSupervise" width="40%">
            <el-form
                ref="form"
                style="margin:20px;"
                :model="superviseForm"
                label-width="100px"
                size="small"
            >
                <el-form-item label="督办信息" style="width:100%;">
                    <el-input
                        type="textarea"
                        v-model="superviseForm.desc"
                        rows="5"
                        placeholder="请输入督办信息"
                    ></el-input>
                </el-form-item>
                <el-form-item label="附件">
                    <el-upload
                        class="upload-demo"
                        :action="httpHome+'direct/Massage/uploadFile'"
                        :on-change="handleUpload"
                        :on-success="fileSuccess"
                        :multiple="true"
                        :before-remove="handlemove"
                        :file-list="fileList3"
                    >
                        <el-button size="small" type="primary">上传附件</el-button>
                        <div slot="tip" class="el-upload__tip">支持文档、图片、压缩包等类型文件上传</div>
                    </el-upload>
                </el-form-item>
            </el-form>

            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisibleSupervise = false" size="mini">取 消</el-button>
                <el-button type="primary" @click="SuperviseSubmit" size="mini">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>
import actionurl from "@/assets/js/actionurl";
import followList from "@/components/follow/List";
import selectMenu from "@/components/selectMenu.vue";
import config from "../../config";

export default {
    name: "tableChart",
    components: {
        followList,
        selectMenu
    },
    props: {
        chartOptions: Object,
        chartData: Object
    },
    data() {
        return {
            originArr: [],
            ThisID: 0,
            httpHome: "",
            dialogVisible: false,
            dialogVisibleMove: false,
            dialogVisibleSupervise: false,
            isShow: true,
            uType: "",
            moveForm: {},
            superviseForm: {},
            region: {
                startTime: "",
                endTime: "",
                target: 0,
                listStatus: -1,
                gname: "0"
            },
            notice: {
                company: "",
                content: "",
                target: "",
                group: "",
                accepttime: ""
            },
            layerForm: {},
            targetArr: [],
            tableData: [],
            target: "",
            status: "",
            currentPage: 1,
            pagesize: 10,
            pagetotal: 10000,
            moveTarget: "",
            movegname: "",
            loading: false,
            MessageGroupArr: "",
            isShowObj: {
                mamageShow: false, //是否运营人员
                officeShow: false, //是否办公室人员
                areaShow: false //是否区县人员
            },

            sname: "市级部门",
            sname2: "县长热线",
            dynamicValidateForm: {
                domains: [
                    {
                        value: "运维",
                        id: "10"
                    }
                ],
                selectList: [
                    {
                        value: "",
                        id: ""
                    }
                ]
            },
            options: [
                {
                    value: "10",
                    label: "测试部门",
                    id: "11"
                }
            ],
            dynamicValidateFormArea: {
                domains: [
                    {
                        value: "河北",
                        id: "12"
                    }
                ],
                selectList: [
                    {
                        value: "",
                        id: ""
                    }
                ]
            },
            optionsArea: [
                {
                    value: "10",
                    label: "安次区",
                    id: "11"
                }
            ],
            fileList3: []
        };
    },
    methods: {
        intoDetail(id) {
            // console.log(id);
            this.$router.push({
                path: "/supervise/" + id + "/2"
            });
        },
        startChange(val) {
            //开始时间控制
            if (val) {
                this.region.startTime = val + " 00:00";
            } else {
                this.region.startTime = val;
            }
        },
        endChange(val) {
            //结束时间控制
            if (val) {
                this.region.endTime = val + " 23:59";
            } else {
                this.region.endTime = val;
            }
        },
        //获取子组件督办按钮事件
        childObjSupervise(obj) {
            this.fileList3 = [];
            this.superviseForm.desc = "";
            this.dialogVisibleSupervise = true;
            // console.log(obj);

            this.ThisID = obj.id;
        },
        update(name) {
            // console.log(name);
        },
        updateArea(name) {
            // console.log(name);
        },
        handleUpload(file, fileList) {
            // this.fileList3 = fileList.slice(-3);
        },
        fileSuccess(event, file, fileList) {
            var obj = {};
            obj.name = file.name;
            obj.url = file.response.data.path;
            this.fileList3.push(obj);
        },
        handlemove(file, fileList) {
            //删除文件操作
            this.loading = true;
            var data = this.fileList3.filter(function(item) {
                //删除文件数组中对应的uid文件
                return item.uid == file.uid;
            });

            this.fileList3.del(function(obj) {
                return obj.uid == data;
            });

            var _this = this;
            _this.fileRemove(file, _this.fileList3);
        },
        fileRemove(file, fileList) {
            //删除文件接口
            var _this = this;
            actionurl.delfile(
                {
                    file: file.url
                },
                function(re) {
                    if ((re.status = 1)) {
                        _this.$message(re.msg);
                    } else {
                        _this.$message(re.msg);
                    }
                }
            );
        },
        SuperviseSubmit() {
            //督办弹窗确定按钮
            var _this = this;

            actionurl.Qsupervise(
                {
                    id: _this.ThisID,
                    sup_attach: JSON.stringify(_this.fileList3),
                    content: _this.superviseForm.desc
                },
                function(re) {
                    if ((re.status = 1)) {
                        _this.$message(re.msg);
                    } else {
                        _this.$message(re.msg);
                    }
                    _this.dialogVisibleSupervise = false;
                }
            );
        },
        // superDetail(row){//督办按钮

        //   this.$router.push({path: '/supervise/'+row.id});
        // },
        updateData(row) {
            //修改事件
            this.dialogVisible = true;
            this.notice.company = row.company;
            this.notice.content = row.content;
            this.notice.target = row.target;
            this.notice.gname = row.gname;
            this.notice.accepttime = row.accepttime;
            //修改弹窗字段
            this.movegname = row.gname;

            this.questionClass();
        },
        MessageList() {
            // 获取列表
            var _this = this;
            if (_this.uType == 3 || _this.uType == 1) {
                actionurl.MgetAllList(
                    {
                        pageNum: _this.pagesize,
                        pageOn: _this.currentPage,
                        progress: _this.region.listStatus,
                        start: _this.region.startTime,
                        end: _this.region.endTime,
                        target: _this.region.target,
                        company: _this.region.company,
                        from: _this.region.from,
                        group: _this.region.gname
                    },
                    function(re) {
                        // console.log(re);
                        if (re.status == 1) {
                            _this.tableData = re.data;
                            _this.pagetotal = re.count;
                            _this.loading = false;
                        } else {
                            _this.$message(re.msg);
                        }
                    }
                );
            } else if (_this.uType == 2) {
                //如果是区县账号
                actionurl.wbAllList(
                    {
                        pageNum: _this.pagesize,
                        pageOn: _this.currentPage,
                        progress: _this.region.listStatus,
                        start: _this.region.startTime,
                        end: _this.region.endTime,
                        target: _this.region.target,
                        company: _this.region.company,
                        group: _this.region.gname
                    },
                    function(re) {
                        // console.log(re);
                        if (re.status == 1) {
                            _this.tableData = re.data;
                            _this.pagetotal = re.count;
                            _this.loading = false;
                        } else {
                            _this.$message(re.msg);
                        }
                    }
                );
            }
        },
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val) {
            this.MessageList();
        },
        //筛选
        Filter() {
            this.loading = true;
            this.MessageList();
        },
        targetListFn() {
            var _this = this;
            actionurl.targetList({}, function(re) {
                // console.log(re);
                if (re.status == 1) {
                    _this.targetArr = re.data;
                } else {
                    _this.$message(re.msg);
                }
            });
        },
        questionClass() {
            var _this = this;
            actionurl.MessageGroup(
                {
                    mesgroup: 1, //0-面对面等分类 1-八大类
                    fid: 1
                },
                function(re) {
                    // console.log(re);
                    if (re.status == 1) {
                        _this.MessageGroupArr = re.data;
                    } else {
                        _this.$message(re.msg);
                    }
                }
            );
        },
        AddQuestion() {
            this.$router.push({ path: "/questionAdd" });
        },
        getUserinfo() {
            //获取用户信息
            var _this = this;
            actionurl.getUserInfo({}, function(re) {
                _this.uType = re.userType;
                _this.MessageList();
                switch (re.userType) {
                    case 1: //运营人员
                        _this.isShowObj.mamageShow = true;
                        break;
                    case 2: //区县账号
                        _this.isShowObj.areaShow = true;

                        break;
                    case 3: //运行局账号
                        _this.isShowObj.officeShow = true;
                        _this.isHide = true;
                        break;
                }
            });
        }
    },
    created() {
        this.getUserinfo();
        this.httpHome = config.URLWEBHTTP;
        this.region.listStatus = "-1";
        this.region.target = "0";
        this.originArr = config.originArr;
        this.questionClass();
    },
    mounted() {
        // this.getUserinfo();
        this.targetListFn();
    }
};
</script>
<style scoped lang="scss">
.persent {
    width: 80%;
    height: 10px;

    display: flex;
    justify-content: space-between;
    position: relative;
    padding-right: 40px;

    span {
        background: #ccc;
        width: 100%;
        line-height: 10px;

        b {
            background: green;
            width: 100%;
            height: 100%;
            display: inline-block;
            float: left;
        }
    }

    em {
        line-height: 10px;
        position: absolute;
        right: 0;
    }
}
.demo-table-expand {
    font-size: 0;
}
.demo-table-expand label {
    width: 90px;
    color: #99a9bf;
}
.demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 90%;
}

.layerup {
    h2 {
        font-size: 18px;
        font-weight: normal;
        text-align: center;
        margin-bottom: 15px;
    }
    span {
        width: 46%;
        line-height: 20px;
    }
    p {
        display: flex;
        justify-content: space-between;
        color: #999;
        margin-bottom: 10px;
    }
    hr {
        border: 1px solid #f5f5f5;
        margin-top: 15px;
    }
}
.titlehover {
    cursor: pointer;
    &:hover {
        color: #1d82d2;
    }
}
</style>
